<template>
  <div class="home">
    <header class="g-header-container">
      <home-header :class="{'header-transition': isHeaderTransition}" ref="header" />
    </header>
    <me-scroll
      :data="recommends"
      pullDown
      @pull-down="pullToRefresh"
      @pull-up="pullToLoadMore"
      @scroll-end="scrollEnd"
      @scroll="scroll"
      @pull-down-transition-end="pullDownTransitionEnd"
      ref="scroll"
    >
      <home-slider ref="slider" />
      <home-nav />
      <HomeRecommend @loaded="getRecommends" ref="recommend" />
    </me-scroll>
    <div class="g-backtop-container">
      <me-backtop :visible="isBacktopVisible" @backtop="backToTop"></me-backtop>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import MeScroll from "base/scroll";
import HomeHeader from "./header";
import HomeSlider from "./slider";
import HomeNav from "./nva";
import HomeRecommend from "./recommend";
import MeBacktop from "base/backtop";
import { HEADER_TRANSITION_HEIGHT } from "./config";

export default {
  data() {
    return {
      recommends: [],
      isBacktopVisible: false,
      isHeaderTransition: false
    };
  },
  name: "Home",
  components: {
    HomeHeader,
    HomeSlider,
    MeScroll,
    HomeNav,
    HomeRecommend,
    MeBacktop
  },
  methods: {
    getRecommends(recommends) {
      this.recommends = recommends;
    },
    pullToRefresh(end) {
      this.$refs.slider.update().then(end);
      // setTimeout(() => {
      //   console.log('下拉刷新');
      //   end();
      // }, 1000);
    },
    pullToLoadMore(end) {
      this.$refs.recommend
        .update()
        .then(end)
        .catch(err => {
          if (err) {
            console.log(err);
          }
          end();
        });
    },
    scroll(translate) {
      this.changeHeaderStatus(translate);
    },
    pullDownTransitionEnd() {
      this.$refs.header.show();
    },
    scrollEnd(translate, scroll) {
      this.isBacktopVisible = translate < 0 && -translate > scroll.height;
    },
    backToTop() {
      this.$refs.scroll && this.$refs.sscroll.scrollToTop();
    },
    changeHeaderStatus(translate) {
      if (translate > 0) {
        this.$refs.header.hide();
        return;
      }

      this.$refs.header.show();
      this.isHeaderTransition = -translate > HEADER_TRANSITION_HEIGHT;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.home {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: $bgc-theme;
}
</style>
